window.onload = function(){
	//获取所有的元素 img标签
	var imgs = document.querySelectorAll('img')

	//获取这个img标签距离页面顶部的距离
	function getTop(e){
		var t = e.offsetTop;
		//这一步防止img标签 使用了定位 产生的误差
		while(e = e.offsetParent){
			t += e.offsetTop;
		}
		return t;
	}

	function lazyload(imgs){
		var h = window.innerHeight;   //屏幕的高度 
		var s = document.documentElement.scrollTop || document.body.scrollTop; //页面向上卷曲出去的高度

		for(var i=0; i<imgs.length; i++){
			if ((h+s)>getTop(imgs[i])){
				//这里是用了闭包，如果 i 是用let 定义则可以不使用闭包
				(function(i){
					// imgs[i].src=imgs[i].getAttribute("data-src");
					setTimeout(function(){
						//console.log(i)
						//隐形加载图片或其它资源
						var tmp = new Image();
						tmp.src=imgs[i].getAttribute("data-src");
						//img 标签的  onloa 事件，当img 标签的 src属性中的资源加载出来后才会执行这个函数
						tmp.onload=function(){
							imgs[i].src=imgs[i].getAttribute("data-src");
						}
					},2000)
				})(i)
				
			}
		}

	}
	lazyload(imgs);
	//页面滚动事件监听
	window.onscroll=function(){
		lazyload(imgs)
	}
}